<template>
    <div class="category">
        <div class="category-header">
            <div class="header-search">
                <div class="search-view" @click="goto('/search')">
                    <i class="iconfont">&#xe626;</i>
                    <p>商品搜索，共有239款好物</p>
                </div>
            </div>
            <div class="header-tabbar">
                <tab bar-active-color="#de181b" active-color="#de181b">
                    <tab-item selected @on-item-click="typeHandler">不限</tab-item>
                    <tab-item @on-item-click="typeHandler">今日特价</tab-item>
                    <tab-item @on-item-click="typeHandler">活动</tab-item>
                </tab>
            </div>
        </div>
        <div class="category-view">
            <template v-if="typeActiveIndex === 0">
                <div class="view-tabbar">
                    <ul>
                        <li
                                :key="k"
                                :class="{'tabbar-acitve':v.id === tabbarActiveIndex}"
                                @click="selectCate(v.id)"
                                v-for="(v,k) in cateList"
                        >{{v.name}}
                        </li>
                    </ul>
                </div>
                <div class="view-content">
                    <div class="content-brand">
                        <img :src="activeCategoryData.banner.imgUrl  | staticSourceFilter">
                    </div>
                    <div class="content-category">
                        <m-category-box
                                :key="k"
                                :title="v.name"
                                v-for="(v,k) in activeCategoryData.secondList"
                        >
                            <m-category-item
                                    :key="k1"
                                    v-for="(v1,k1) in v.thirdList"
                                    :data="v1"
                            ></m-category-item>
                        </m-category-box>
                    </div>
                </div>
            </template>
            <template v-if="typeActiveIndex === 1">
                <div class="view-counter">
                    <m-special-cell
                            :data="item"
                            :key="key"
                            v-for="(item,key) in counterList"
                    ></m-special-cell>
                </div>
            </template>
            <template v-if="typeActiveIndex === 2"></template>
        </div>
    </div>
</template>

<script>
    import {Tab, TabItem} from "vux";

    export default {
        data() {
            return {
                counterList: [
                    {
                        imageUrl: require('../../static/images/special_default_goods.jpg'),
                        title: '玩具不应该只是小孩的专属品',
                        desc: '这些成人玩具，虽然无聊但真的叫人上瘾',
                        price: '237.00'
                    }
                ],
                typeActiveIndex: 0
            }
        },
        computed: {
            cateList() {
                return this.$store.getters.categoryTabList;
            },
            tabbarActiveIndex() {
                return this.$store.getters.activeCategoryId;
            },
            activeCategoryData() {
                return this.$store.getters.activeCategoryData
            }
        },
        components: {
            Tab,
            TabItem
        },
        methods: {
            typeHandler(index) {
                this.typeActiveIndex = index;
            },
            selectCate(id) {
                this.$store.dispatch('selectCategory', id);
            },
            getCategory() {
                const self = this;
                this.$http.category().then(res => {
                    if (res.success === true) {
                        self.$store.dispatch('initCategoryList', res.data);
                    }
                }, error => {
                })
            }
        },
        created() {
            this.getCategory();
        }
    };
</script>

<style lang="less" scoped>
    @import "../../static/less/var.less";

    .category {
        position: absolute;
        top: 56px;
        left: 0px;
        right: 0px;
        bottom: 53px;
        display: flex;
        flex-direction: column;
        background: white;
        .category-header {
            flex-grow: 0;
            padding: 0px 10px;
            .header-search {
                padding: 10px 0px;
                .search-view {
                    display: flex;
                    height: 35px;
                    padding: 0px 10px;
                    background: @background-color;
                    border-radius: 5px;
                    text-align: center;
                    i {
                        flex-basis: 35px;
                        font-size: 20px;
                        line-height: 35px;
                    }
                    p {
                        flex: 1;
                        font-size: 14px;
                        line-height: 35px;
                        color: @content-color;
                    }
                }
            }
        }
        .category-view {
            position: relative;
            flex: 1;
            display: flex;
            .view-tabbar {
                position: relative;
                flex-basis: 70px;
                overflow-x: hidden;
                overflow-y: auto;
                ul {
                    display: flex;
                    flex-direction: column;
                    list-style: none;
                    li {
                        position: relative;
                        flex-basis: 50px;
                        flex-grow: 0;
                        line-height: 50px;
                        text-align: center;
                        font-size: 14px;
                        color: @content-color;
                    }
                    .tabbar-acitve {
                        color: #de181b;
                        &::after {
                            position: absolute;
                            content: '';
                            top: 0px;
                            left: 0px;
                            height: 100%;
                            width: 2px;
                            background: #de181b;
                        }
                    }
                }
                &::after {
                    position: absolute;
                    content: '';
                    top: 0px;
                    right: 0px;
                    height: 100%;
                    border-right: 1px solid @divider-color;
                    transform: scaleX(0.5);
                }
            }
            .view-content {
                flex: 1;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 0px 10px;
                .content-brand {
                    width: 100%;
                    height: 100px;
                    padding: 15px 0px;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .view-counter {
                position: absolute;
                top: 0px;
                width: 100%;
                bottom: 0px;
            }
        }
    }
</style>
